\section{jQuery的基础概念}

在jQuery官方网站下载最新版\footnote{jQuery的版本有两个分支，一个是支持低版本IE浏览器的1.xx，另一个是不支持低版本IE浏览器的2.xx。鉴于目前仍有相当可观数量的低版本IE用户，在大多数情况下我们选择1.XX的最新版。}的jQuery，将其放置在合适的目录中，然后在HTML文档中使用script元素引用jQuery库，即可使用jQuery提供的强大方便的功能。

\begin{lstlisting}
<script src="js/jquery-1.11.3.min.js"></script>
\end{lstlisting}

\subsection{jQuery中的“\$”}

在jQuery中，最频繁使用的莫过于美元符号“\$”，在jQuery中，美元符号“\$”等同于“jQuery”，表示jQuery对象。
jQuery对象就是通过jQuery包装DOM对象之后产生的对象。为了方便代码的编写，通常采用“\$”代替“jQuery”。“\$”提供了丰富的功能，包括选择页面中的元素、作为功能函数的前缀、window.onload的改进、创建DOM等等。一定要注意，在jQuery对象中无法直接使用原生JavaScript中DOM对象的方法和属性，但可使用get(index)方法将jQuery对象转化为DOM对象。

\subsubsection{\$( document ).ready()}

浏览器载入HTML文档并不是一次性全部载入的，而是从上到下依次载入。但我们的脚本可能就在文档的顶端或者中间，当脚本已经载入，但HTML文档还没有完全载入完毕时，脚本去处理还没有载入的DOM时会产生无效或者错误结果。为了解决这一问题，人们想出了一些方案：

\begin{description}
	\item [将脚本放在页面最下面] 这种方案在大多数时候是有效的，但是有的时候，创作者并没有能将脚本放在页面底部的权限或者可能性。\footnote{例如，在大多数CMS中，普通编辑人员只能就文档的局部内容进行修改，整体文档的生成则是不同部门的合作结果。想象一下淘宝、天猫的首页、门户网站的首页等等皆是如此。}
	\item [使用window.onload事件] window.onload会在页面所有元素都载入后触发，当页面中有大量图片或者视频时，触发的时机有些过晚。还有，window.onload只能使用一次，当页面中的多个脚本调用window.onload时会产生冲突。
\end{description}

jQuery中的ready()方法很好地解决了上述问题，它能够自动将其中的函数在页面加载（实际上是DOM准备完毕后）完成后运行。并且同一个页面可以使用多个ready()方法，而且互不冲突。\$( document ).ready()可简写为\$()。

\lstinputlisting{example/jQuery/documentReady.html}

上面的页面运行后，我们在浏览器控制台中可以看到\$( document ).ready()方法运行的三个结果，而window.onload事件虽然脚本中设置了两次，但输出的结果只有一个。

\subsubsection{选择符}

在CSS中，选择符的作用是选择页面中的某些元素，例如，在CSS中，我们可以使用id选择符选择特定的元素，然后为其添加样式：

\begin{lstlisting}
#demo {
	color:red;
}
\end{lstlisting}

虽然CSS3提供非常丰富的选择器，但是由于某些选择器被各个浏览器支持的情况不一样，所以很多选择器在实际CSS开发中很少用到。而在jQuery中，“\$”也能使用CSS中的选择符，达到选择特定元素的目的。而且，jQuery中的选择符已经为用户处理了繁琐复杂的浏览器兼容性问题。

\lstinputlisting{example/jQuery/jquerySelector.html}

从上例的运行结果我们可以看出，CSS选择符确实可以在jQuery中使用。事实上jQuery通过预先的编程，提供了几乎所有CSS3标准下的选择器。
